<template>
	<view class="mine-page">

		<!-- 用户信息区域 -->
		<view class="user-info-section">
			<view class="avatar">
				<button class="avatar-button" open-type="" @chooseavatar="chooseavatar">
					<image :src="userInfo.wx_avatar || '/static/logo.png'" mode="aspectFill"></image>
				</button>
			</view>
			<view class="user-info">
				<button class="name-button" @click="toLogin()" v-if="!userInfo">请登录</button>
				<input class="name-input" :value="userInfo.wx_name" @blur="nicknamereview" type="nickname" v-else
					placeholder="请输入微信名" />
				<!--				<text class="phone-hint" v-if="!userInfo?.phone">未绑定手机号</text>-->
				<!--				<text class="phone-hint" v-else>{{userInfo?.phone}}</text>-->
			</view>
			<view class="points">
				<text class="points-num">{{userInfo?.id}}</text>
				<text class="points-text">ID</text>
			</view>
		</view>

		<!-- VIP会员卡片 -->
		<view class="vip-card">
			<view class="vip-left">
				<image class="vip-icon" src="/static/icons/vip.png"></image>

				<text class="vip-text">VIP会员 | 高速通道 | 无限对话</text>
			</view>
			<view  class="vip-button" @click="goVip()">{{userInfo.vip_type==='free'?'立即开通':'我的VIP'}}</view>
		</view>

		<!-- 功能列表 - 第一组 -->
		<view class="function-group">
			<view class="function-item" v-for="(item, index) in topFunctions" :key="index">
				<view class="function-button" @click="handleFunctionClick(item)">
					<text class="function-icon">{{ item.icon }}</text>
					<text class="function-text">{{ item.name }}</text>
					<text class="arrow">></text>
				</view>
			</view>
		</view>

		<!-- 功能列表 - 第二组 -->
		<view class="function-group">
			<view class="function-item" v-for="(item, index) in bottomFunctions" :key="index">
				<button class="function-button" style="border: none;" :open-type="item.openType"
					@click="handleFunctionClick(item)" v-if="item.openType">
					<text class="function-icon">{{ item.icon }}</text>
					<text class="function-text">{{ item.name }}</text>
					<text class="arrow">></text>
				</button>
				<view class="function-button" @click="handleFunctionClick(item)" v-else>
					<text class="function-icon">{{ item.icon }}</text>
					<text class="function-text">{{ item.name }}</text>
					<text class="arrow">></text>
				</view>
			</view>
		</view>

		<!-- 版本号 -->
		<view class="version">
			<text>版本号 v1.0.0</text>
		</view>

		<!-- 添加自定义计费说明弹窗 -->
		<view class="pricing-popup" v-if="showPricing" @click.stop="showPricing = false">
			<view class="pricing-content" @click.stop>
				<view class="pricing-header">
					<text class="pricing-title">计费说明</text>
					<text class="close-btn" @click="showPricing = false">×</text>
				</view>

				<view class="pricing-body">
					<view class="pricing-section">
						<view class="section-title">🎁 新用户福利</view>
						<view class="section-content">注册即赠送50次免费对话</view>
					</view>

					<view class="pricing-section">
						<view class="section-title">👑 VIP会员特权</view>
						<view class="section-content">
							<view class="vip-feature">✓ 无限次对话</view>
							<view class="vip-feature">✓ 高速通道优先响应</view>
							<view class="vip-feature">✓ 支持更长对话上下文</view>
							<view class="vip-prices">
								<view class="vip-price-item">
									<text>月卡</text>
									<text class="highlight">￥9.9/月</text>
								</view>
								<view class="vip-price-item">
									<text>年卡</text>
									<text class="highlight">￥99/年</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="pricing-footer">
					<view class="confirm-btn" @click="showPricing = false">我知道了</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		userApi
	} from '../../utils/api.js'
	const userInfo = ref({
		wx_name: '',
		phone: '',
		id: ''
	}) // 初始化 userInfo 对象
	/**
	 * 修改用户名
	 */
	const nicknamereview = async (e) => {
		if (e.detail.value === userInfo.value.wx_name) {
			return;
		}
		const res = await userApi.updateUserInfo({
			id: userInfo.value.id,
			wx_name: e.detail.value
		})
		if (res.success) {
			getUserInfo();
			uni.showToast({
				title: '信息更新成功',
				icon: 'none'
			})
		}
	}
	/**
	 * 更新头像
	 */
	const chooseavatar = async (e) => {
		
		console.log(e.detail.avatarUrl);
		const res = await userApi.updateUserInfo({
			id: userInfo.value.id,
			wx_avatar: e.detail.avatarUrl
		})
		if (res.success) {
			getUserInfo();
			uni.showToast({
				title: '信息更新成功',
				icon: 'none'
			})
		}
	}
	const getUserInfo=()=>{
		userApi.getUserInfo().then((res)=>{
			userInfo.value =  res.data;
			uni.setStorageSync('userInfo',res.data);
		})
	}
	onMounted(() => {
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage']
		});
		getUserInfo();
		const data = uni.getStorageSync('userInfo')
		if (data) {
			userInfo.value = data
			if (userInfo.value.is_admin === 1) {
				//是管理员
				bottomFunctions.value.push({
					icon: '️✨',
					name: '我的智能体',
					action: () => uni.navigateTo({
						url: '/pages/index/index'
					})
				})
				// 会员管理
				bottomFunctions.value.push({
					icon: '️✨',
					name: '会员询问记录',
					action: () => uni.navigateTo({
						url: '/pages/admin/askHistory/askHistory'
					})
				})
 			}
		}

	})
	
	const topFunctions = ref([{
		icon: '💰',
		name: '计费说明',
		action: () => {
			showPricingInfo();
		}
	}, ])

	const showPricing = ref(false)

	// 修改显示计费说明的方法
	const showPricingInfo = () => {
		showPricing.value = true
	}

	const bottomFunctions = ref([{
			icon: '📝',
			name: '意见反馈',
			action: () => {},
			openType: 'feedback'
		},
		{
			icon: 'ℹ️',
			name: '关于我们',
			action: () => uni.navigateTo({
				url: '/pages/mine/about'
			})
		},
		{
			icon: '💬',
			name: '联系客服',
			action: () => {},
			openType: 'contact'
		},
    {
      icon: '️⛳',
      name: '邀请推荐',
      action: () => uni.navigateTo({
        url: '/pages/admin/memberManage/memberManage'
      })
    }

	])

	/**
	 * 调整VIP充值页面
	 */
	const goVip = ()=>{
		uni.navigateTo({
			url:'/pages/mine/vip/vip'
		})
	}
	const handleFunctionClick = (item) => {
		if (item.action) {
			item.action()
		}
	}

	const toLogin = () => {
		uni.navigateTo({
			url: '/pages/mine/login'
		})
	}
</script>

<style scoped>
	.mine-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.status-bar {
		padding: 40rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #e8f7f7;
	}

	.right-icons {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.user-info-section {
		padding: 20rpx 32rpx;
		display: flex;
		align-items: center;
		background-color: #e8f7f7;
	}

	.avatar image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.user-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.avatar-button {
		border: none;
		background: none;
		padding: 0;
	}

	.name-button {
		border: none;
		background: none;
		padding: 0;
		text-align: left;
	}

	.login-text {
		font-size: 32rpx;
		font-weight: bold;
	}

	.name-input {
		border: none;
		background: none;
		padding: 0;
		text-align: left;
		font-size: 32rpx;
		font-weight: bold;
	}

	.phone-hint {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-top: 8rpx;
	}

	.points {
		text-align: right;
	}

	.points-num {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
	}

	.points-text {
		font-size: 24rpx;
		color: #666;
		display: block;
	}

	.vip-card {
		margin: 20rpx;
		padding: 30rpx;
		background-color: #fff9e6;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.vip-left {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.vip-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.vip-text {
		font-size: 28rpx;
		color: #8B4513;
	}

	.vip-button {
		padding: 10rpx 30rpx;
		background-color: #f8e3c5;
		border-radius: 30rpx;
		font-size: 28rpx;
	}

	.function-group {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.function-item {
		padding: 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
	}

	.function-item:last-child {
		border-bottom: none;
	}

	.function-icon {
		margin-right: 20rpx;
		font-size: 40rpx;
	}

	.function-text {
		flex: 1;
		font-size: 28rpx;
	}

	.arrow {
		color: #ccc;
	}

	button {
		border-radius: 0;
	}

	button::after {
		border: none;
	}


	.function-button {
		display: flex;
		align-items: center;
		padding: 10rpx;
		border: none;
		border-bottom: 1rpx solid #eee;
		width: 100%;
		background: none;
		justify-content: space-between;
		border-radius: 0;

		position: relative;
		margin-left: auto;
		margin-right: auto;
		line-height: 1;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		text-align: left;

	}

	.function-button:last-child {
		border-bottom: none;
	}

	.version {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 24rpx;
	}

	.pricing-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pricing-content {
		width: 85%;
		max-height: 80vh;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.pricing-header {
		padding: 30rpx;
		text-align: center;
		position: relative;
		border-bottom: 1rpx solid #eee;
	}

	.pricing-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.close-btn {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 40rpx;
		color: #999;
	}

	.pricing-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	.pricing-section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
	}

	.section-content {
		color: #666;
		font-size: 28rpx;
		line-height: 1.6;
	}

	.price-grid {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.price-item {
		background: #f8f8f8;
		padding: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		flex: 1;
		margin: 0 10rpx;
	}

	.amount {
		display: block;
		color: #333;
		margin-bottom: 10rpx;
	}

	.price {
		color: #ff6b6b;
		font-weight: bold;
	}

	.vip-feature {
		margin-bottom: 10rpx;
		color: #666;
	}

	.vip-prices {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.vip-price-item {
		text-align: center;
	}

	.highlight {
		color: #ff6b6b;
		font-weight: bold;
		font-size: 32rpx;
		display: block;
		margin-top: 10rpx;
	}

	.pricing-footer {
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #eee;
	}

	.confirm-btn {
		background: #09e43f;
		color: #fff;
		text-align: center;
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
	}
</style>